<template>
	<view class="con">
		<view class="address-box" v-if="address!=null" @click="toaddress">
			<view class="a-l">
				<u-icon name="map-fill" color="#F09238" size="50"></u-icon>
			</view>
			<view class="a_c">
				<view class="ac_t">
					<view class="name">{{address.userName}}</view>
					<view class="phone">{{address.userPhone}}</view>
				</view>
				<view class="address">
					{{address.provinceName}}{{address.cityName}}{{address.areaName}}{{address.provinceName}}{{address.detail}}
				</view>
			</view>
			<view class="a_r">
				<u-icon name="arrow-right" color="#999" size="36"></u-icon>
			</view>
		</view>
		<view class="address-box" @click="toaddress" v-if="address==null">
			<view class="add">点击选择地址</view>
		</view>
		<!-- 购物车下单流程 -->
		<view class="goodsbox" v-for="(item,index) in goods" v-if="iscar==true">
			<view class="dname">{{item.communityName}}店铺</view>
			<view class="g_con" v-for="(it,i) in item.cartGoodsList">
				<image :src="it.picUrl" mode="aspectFill" class="g_img"></image>
				<view class="g_title">
					<view class="g_name">{{it.goodsName}}</view>
					<view class="g_gg">规格：{{it.specifications | text}}</view>
					<view class="g_gp" v-if="it.isEnableGrade==0">{{it.integral}}积分</view>
					<view class="g_gp" v-if="it.isEnableGrade==1">￥{{it.price}}</view>
					<view class="g_gp" v-if="it.isEnableGrade==2">
						￥{{it.price}}+{{it.integral}}积分</view>
				</view>
			</view>
			<view class="t_item">
				<view class="left">配送方式</view>
				<view class="right" @click="pstype(index)">{{item.pstype | ps}}</view>
			</view>
			<view class="t_item">
				<view class="left">使用优惠券</view>
				<view class="right" @click="changeq(item)">{{item.qname}}</view>
			</view>
			<view class="t_item">
				<view class="left">订单备注 </view>
				<input type="text" v-model="item.text" placeholder="订单备注" class="right"/>
			</view>
			<view class="t_item">
				<view class="left">订单小计 </view>
				<view class="right" v-if="item.shopMoney!=0&&item.shopIntegral==0">￥{{item.shopMoney}}</view>
				<view class="right" v-if="item.shopMoney==0&&item.shopIntegral!=0">{{item.shopIntegral}}积分</view>
				<view class="right" v-if="item.shopMoney!=0&&item.shopIntegral!=0">{{item.shopMoney}}+{{item.shopIntegral}}积分</view>
			</view>
		</view>
		<!-- 正常立即购买流程 -->
		<view class="goodsbox" v-for="(item,index) in goods" v-if="iscar==false">
			<view class="dname">{{item.name}}店铺</view>
			<view class="g_con" v-for="(it,i) in item.goodsList">
				<image :src="it.picUrl" mode="aspectFill" class="g_img"></image>
				<view class="g_title">
					<view class="g_name">{{it.name}}</view>
					<view class="g_gg">规格：{{it.goodsDetailedList[0].specifications | text}}</view>
					<view class="g_gp" v-if="it.isEnableGrade==0">{{it.goodsDetailedList[0].integral}}积分</view>
					<view class="g_gp" v-if="it.isEnableGrade==1">￥{{it.goodsDetailedList[0].price}}</view>
					<view class="g_gp" v-if="it.isEnableGrade==2">
						￥{{it.goodsDetailedList[0].price}}+{{it.goodsDetailedList[0].integral}}积分</view>
				</view>
			</view>
			<view class="t_item">
				<view class="left">配送方式</view>
				<view class="right" @click="pstype(index)">{{item.pstype | ps}}</view>
			</view>
			<view class="t_item">
				<view class="left">使用优惠券</view>
				<view class="right" @click="qshow=true">{{qname}}</view>
			</view>
			<view class="t_item">
				<view class="left">订单备注 </view>
				<input type="text" v-model="item.text" placeholder="订单备注" class="right"/>
			</view>
		</view>
		<!-- 秒杀购买流程 -->
		<view class="goodsbox" v-if="iscar==null">
			<!-- <view class="dname">{{item.name}}店铺</view> -->
			<view class="g_con" >
				<image :src="goods.picUrl" mode="aspectFill" class="g_img"></image>
				<view class="g_title">
					<view class="g_name">{{goods.name}}</view>
					<!-- <view class="g_gg">规格：{{it.goodsDetailedList[0].specifications | text}}</view> -->
					<!-- <view class="g_gp">￥{{it.goodsDetailedList[0].price}}</view> -->
				</view>
			</view>
			<view class="t_item">
				<view class="left">配送方式</view>
				<view class="right" @click="mspstype">{{goods.pstype | ps}}</view>
			</view>
			<view class="t_item">
				<view class="left">订单备注 </view>
				<input type="text" v-model="goods.text" placeholder="订单备注" class="right"/>
			</view>
		</view>
		<view class="btnbox">
			<view class="price" v-if="money!=0&&integral==0">￥{{cmoney}}</view>
			<view class="price" v-if="money!=0&&integral!=0">￥{{cmoney}}+{{integral}}积分</view>
			<view class="price" v-if="money==0&&integral!=0">{{integral}}积分</view>
			<view class="btn" @click="$u.throttle(addorder,1000)">提交订单</view>
		</view>
		<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
		<u-popup v-model="qshow" mode="bottom" border-radius="14">
			<scroll-view class="quanbox" scroll-y v-if="qlist!=null&&qlist.length>0">
				<view class="quan" v-for="(item,index) in qlist">
					<view class="dpimgbox">
						<image src="../../static/enterprise/item.png" mode="aspectFill"></image>
					</view>
					<view class="dpnamecon">
						<view class="bbbb">
							<view class="ddnn">{{item.couponName}}</view>
							<view class="man" v-if="item.couponType==0">
								<view class="jian">￥{{item.couponMoney}}</view>
								<view class="mmmm">满{{item.couponThreshold}}可用</view>
							</view>
							<view class="man" v-if="item.couponType==1">
								<view class="jian">{{item.discount}}%</view>
								<view class="mmmm">折扣券</view>
							</view>
						</view>
						<!-- 这是购物车下单的 -->
						<view :class="{'ccc':item.isUse==2}" class="qbtn" @click="caractive(item)" v-if="iscar">点击使用</view>
						<!-- 这是直接下单的 -->
						<view :class="{'ccc':item.isUse==2}" class="qbtn" @click="active(item)" v-else>点击使用</view>
					</view>
					<view class="top"></view>
					<view class="bottom"></view>
				</view>
			</scroll-view>
			<view v-else>
				<view style="height: 100rpx;text-align: center;line-height: 100rpx;">
					暂无可用优惠券
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		yorder,xiadan,pay,carorder,caraddshop,msporder,msxd
	} from "../../api/product.js"
	export default {
		data(){
			return {
				address: null,
				id: null,
				num: null,
				goods: [],
				money: 0,
				integral: 0,
				show: false,
				qshow:false,
				list: [{
						value:0,
						label:"快递配送"
					},
					{
						value:1,
						label:"自提"
					}
				],
				index:null,
				iscar:null,
				carlist:null,
				qlist:[],
				catid:null,
				qname:"选择优惠券",
				qid:null,
				qj:0,
			}
		},
		filters: {
			text(val) {
				let s = val.replace(/\"/g, "")
				let ss = s.replace(/\[/g, "")
				let sss = ss.replace(/\]/g, "")
				return sss
			},
			ps(val){
				if(val==0){
					return "快递配送"
				}
				if(val==1){
					return "自提"
				}
			}
		},
		computed:{
			cmoney(){
				return this.money - this.qj
			}
		},
		onLoad(e) {
			// 商品立即购买
			if(e.msid){
				this.id = e.msid
				this.getmsinfo()
			}
			if (e.id) {
				this.id = e.id
				this.num = e.num
				this.getinfo()
				this.iscar=false
			}
			if(e.data){
				this.iscar=true
				this.carlist=e.data
				this.getcarinfo()
				console.log(this.carlist)
				
			}
		},
		onShow() {
			uni.$once('setAddress', (data) => {
				this.address = data
				uni.$off('setAddress')
			})
		},
		methods: {
			changeq(item){
				this.catid=item.cartId
				this.qlist=item.couponList
				this.qshow=true
			},
			active(item){
				if(item.isUse==2){
					this.msg("暂不可用","none")
				}else{
					this.qid=item.userCouponId
					this.qname=item.couponName
					this.qshow=false
					if(item.couponType==0){
						this.qj=item.couponMoney
					}else{
						this.qj=this.money*(100-item.discount)*0.01
					}
				}
				console.log('qj',this.qj)
			},
			caractive(item){
				if(item.isUse==2){
					this.msg("暂不可用","none")
				}else{
					this.goods.forEach(it=>{
						if(it.cartId==this.catid){
							it.qid=item.userCouponId
							it.qname=item.couponName
							if(item.couponType==0){
								it.mj=item.couponMoney
							}else{
								it.mj=it.shopMoney*(100-item.discount)*0.01
							}
							console.log(it)
						}
					})
					let data=0
					this.goods.forEach(it=>{
						data=data+it.mj
					})
					this.qj=data
					this.qshow=false
				}
			},
			confirm(e){
				console.log(e)
				if(this.index!=null){
					this.goods[this.index].pstype=e[0].value
				}else{
					this.goods.pstype=e[0].value
				}
				console.log(this.goods)
			},
			pstype(index){
				this.index=index
				this.show=true
			},
			mspstype(){
				this.show=true
			},
			toaddress() {
				uni.navigateTo({
					url: "/pages/address/addresslist?type=true"
				})
			},
			async addorder(){
				// 立即购买的产品
				if(this.address==null){
					this.msg('未选择地址',"none")
					return
				}
				if(this.iscar==null){
					let data={
						seckillId:this.id,
						freightType:this.goods.pstype,
						addressId:this.address.addressId,
						buyerRemark:this.goods.text
					}
					let res=await this.post(msxd,data)
					uni.navigateTo({
						url:"./pay?orderid="+res.data.orderId
					})
				}
				if(this.iscar==false){
					let data={
						goodsId:this.goods[0].goodsList[0].goodsId,
						goodsDetailedId:this.goods[0].goodsList[0].goodsDetailedList[0].goodsDetailedId,
						num:this.num,
						addressId:this.address.addressId,
						freightType:this.goods[0].pstype,
						buyerRemark:this.goods[0].text
						}
						if(this.qid!=null){
							data.couponId=this.qid
							data.couponMoney=this.qj
						}
					let res=await this.post(xiadan,data)
					if(this.money==0){
						let r=await this.post(pay,{orderId:res.data.orderId,payType:1})
						uni.navigateTo({
							url:"./orderinfo?orderid="+res.data.orderId
						})
					}
					if(this.money>0){
						uni.navigateTo({
							url:"./pay?orderid="+res.data.orderId
						})
					}
				}else if(this.iscar==true){
					// 购物车下单的商品
					let data=[]
					this.goods.forEach(item=>{
						let obj={}
						obj.cartId=item.cartId
						obj.buyerRemark=item.text
						obj.freightType=item.pstype
						obj.money=item.shopMoney.toFixed(2)
						obj.integral=item.shopIntegral
						if(item.qid!=null){
							obj.couponMoney=item.mj.toString()
							obj.couponId=item.qid.toString()
						}else{
							obj.couponMoney="0"
							obj.couponId=""
						}
						let arr=[]
						item.cartGoodsList.forEach(it=>{
							arr.push(it.cartGoodsId)
						})
						obj.cartGoodsId=arr.join(",")
						data.push(obj)
					})
					let res=await this.post(caraddshop,{cartGoodsJson:JSON.stringify(data),addressId:this.address.addressId})
					if(this.cmoney>0){
						if(res.data.orderList.length>1){
							// 多商户多笔订单，每笔订单需要单独支付
							this.showMd("多笔订单需要单独支付",()=>{
								uni.navigateTo({
									url: "/pages/order/orderlist?index=0"
								})
							})
						}else{
							let data=[]
							res.data.orderList.forEach(item=>{
								let obj={}
								obj.orderId=item.orderId
								obj.totalIntegral=item.totalIntegral
								obj.totalPrice=item.actualPrice
								data.push(obj)
							})
							console.log(data)
							uni.navigateTo({
								url:"./pay?iscar=true&orderid="+JSON.stringify(data)
							})
						}
						
					}
					if(this.cmoney==0){
						let num = 0
						for (let i = 0; i < res.data.orderList.length; i++) {
							let r = await this.post(pay, {
								orderId: res.data.orderList[i].orderId,
								payType: 1
							})
							num++
							if (num == res.data.orderList.length) {
								console.log(num)
								uni.navigateTo({
									url: "/pages/order/orderlist?index=1"
								})
							}
						}
					}
				}
			},
			// 获取购物车下单数据
			async getcarinfo(){
				let res=await this.get(carorder,{cartGoodsJson:this.carlist})
				this.address = res.data.userAddress
				this.goods = res.data.cartInfo
				this.goods.forEach(item=>{
					item.pstype=0
					item.text=""
					item.mj=0
					item.qid=null
					item.qname="选择优惠券"
					item.mj=0
				})
				console.log(this.goods)
				this.integral = res.data.integral
				this.money = res.data.money
				// this.qlist=res.data.
			},
			// 获取直接下单的数据
			async getinfo() {
				let res = await this.get(yorder, {
					goodsDetailedId: this.id,
					num: this.num
				})
				this.address = res.data.userAddress
				this.goods = res.data.goods
				this.goods.forEach(item=>{
					item.pstype=0
					item.text=""
				})
				this.integral = res.data.integral
				this.money = res.data.money
				this.qlist=res.data.couponList
			},
			// 获取秒杀的商品详情
			async getmsinfo(){
				let res=await this.get(msporder,{seckillId:this.id})
				console.log(res)
				this.address = res.data.userAddress
				this.money = res.data.money
				this.goods = res.data.goods
				this.goods.pstype=0
				this.goods.text=""
			}
		
		}
	}
</script>

<style lang="less">
	.mmmm {
		height: 28rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 28rpx;
		color: #EC5F2A;
		opacity: 1;
	}
	
	.jian {
		color: #ED712F;
		font-size: 28rpx;
		margin-right: 20rpx;
	}
	
	.qbtn {
		width: 140rpx;
		height: 50rpx;
		background: linear-gradient(180deg, #F09238 0%, #EC5F2A 100%);
		opacity: 1;
		border-radius: 30rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		text-align: center;
		line-height: 50rpx;
	}
	.ccc{
		background: #999999 !important;
		opacity:0.5;
	}
	.ddnn {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 42rpx;
		color: #ED712F;
		opacity: 1;
	}
	
	.bbbb {
		height: 150rpx;
		padding-top: 20rpx;
	}
	
	.man {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}
	
	.dpnamecon {
		display: flex;
		align-items: center;
		width: 450rpx;
		justify-content: space-between;
		padding-left: 40rpx;
		box-sizing: border-box;
	}
	
	.quanbox {
		padding: 30rpx 55rpx;
		max-height: 750rpx;
	
	}
	
	.dpimgbox {
		width: 171rpx;
		height: 150rpx;
		border-right: 1px #FF0000 dashed;
		padding-left: 30rpx;
		display: flex;
		align-items: center;
	
		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100rpx;
		}
	}
	
	.quan {
		height: 150rpx;
		width: 640rpx;
		background-color: #FDECE0;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}
	
	.top {
		width: 40rpx;
		height: 40rpx;
		background-color: #FFFFFF;
		left: 150rpx;
		top: -20rpx;
		position: absolute;
		border-radius: 40rpx;
	}
	
	.bottom {
		width: 40rpx;
		height: 40rpx;
		background-color: #FFFFFF;
		left: 150rpx;
		top: 130rpx;
		position: absolute;
		border-radius: 40rpx;
	}
	
	.add {
		text-align: center;
		font-size: 40rpx;
		color: #F09238;
		flex: 1;
	}

	.price {
		padding-left: 30rpx;
		line-height: 88rpx;
		font-size: 34rpx;
	}

	.btn {
		width: 224rpx;
		height: 88rpx;
		background: #F09238;
		opacity: 1;
		border-radius: 0px 10rpx 10rpx 0px;
		text-align: center;
		line-height: 88rpx;
		color: #FFFFFF;
	}

	.btnbox {
		height: 88rpx;
		width: 690rpx;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 40rpx;
		left: 30rpx;
	}

	.xj {
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
		opacity: 1;
		text-align: right;
		margin-top: 30rpx;
	}

	.right {
		font-size: 28rpx;
		line-height: 33rpx;
		color: #666;
		text-align: right;
		width: 400rpx;
	}
	.left {
		font-size: 30rpx;
		font-weight: 400;
		line-height: 40rpx;
		color: #333333;
		opacity: 1;
	}

	.t_item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.g_gg {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 40rpx;
		color: #999999;
		opacity: 1;
	}

	.g_gp {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 40rpx;
		color: #E6852C;
		opacity: 1;
	}

	.g_name {
		font-size: 26rpx;
		font-weight: bold;
		line-height: 40rpx;
		color: #000000;
		opacity: 1;
		display: -webkit-box;
		/*将对象作为弹性伸缩盒子模型显示*/
		overflow: hidden;
		/* 超出的文本隐藏 */
		text-overflow: ellipsis;
		/* 溢出用省略号显示 */
		word-wrap: break-word;
		/* 文本高出宽度换行 */
		white-space: normal !important;
		/* 溢出不换行 */
		-webkit-line-clamp: 2;
		/* 表示显示的行数 */
		-webkit-box-orient: vertical;
		/* 从上到下垂直排列子元素 */
	}

	.g_title {
		width: 460rpx;
		color: #000000;
		opacity: 1;
		margin-left: 30rpx;
		height: 166rpx;

	}

	.g_img {
		width: 166rpx;
		height: 166rpx;
		border-radius: 10rpx;
	}

	.g_con {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.dname {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 33rpx;
		color: #000000;
		opacity: 1;
	}

	.goodsbox {
		width: 690rpx;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		padding: 30rpx 20rpx;
		margin-top: 30rpx;
	}

	.address {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 33rpx;
		color: #000000;
		opacity: 1;
		display: -webkit-box;
		/*将对象作为弹性伸缩盒子模型显示*/
		overflow: hidden;
		/* 超出的文本隐藏 */
		text-overflow: ellipsis;
		/* 溢出用省略号显示 */
		word-wrap: break-word;
		/* 文本高出宽度换行 */
		white-space: normal !important;
		/* 溢出不换行 */
		-webkit-line-clamp: 2;
		/* 表示显示的行数 */
		-webkit-box-orient: vertical;
		/* 从上到下垂直排列子元素 */
	}

	.phone {
		font-size: 26rpx;
		font-weight: 500;
		line-height: 70rpx;
		color: #666;
		opacity: 1;
	}

	.name {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 70rpx;
		color: #000000;
		opacity: 1;
		margin-right: 40rpx;
	}

	.ac_t {
		display: flex;
		align-items: center;
	}

	.a_r {
		margin-left: 10rpx;
	}

	.a_c {
		width: 550rpx;
	}

	.a-l {
		width: 85rpx;
		display: flex;
		justify-content: center;

	}

	.address-box {
		width: 690rpx;
		height: 182rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
	}

	.con {
		background-color: #F6F6F6;
		min-height: 100vh;
		padding: 30rpx;
		box-sizing: border-box;
		padding-bottom: 200rpx;
	}
</style>
